<template>
	<view>
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC': ''" title="故障报修">
				<trouble-shoot @init="initList" :operatorList="operatorList" @submit="troubleShoot" :projectList="projectList"></trouble-shoot>
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC': ''" title="设备安装">
				<equipment-install @init="initList" :operatorList="operatorList" @submit="equipmentInstall" :projectList="projectList"></equipment-install>
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #1152FC': ''" title="保洁清理">
				<environment-clean @init="initList" :operatorList="operatorList" @submit="validate1" :projectList="projectList"></environment-clean>
			</van-tab>
			<van-tab :title-style="active == 3 ? 'color: #1152FC': ''" title="网格社工">
				<grid-social @init="initList" :operatorList="operatorList" @submit="troubleShoot" :projectList="projectList"></grid-social>
			</van-tab>
			<van-tab :title-style="active == 4 ? 'color: #1152FC': ''" title="上门回收">
				<door-recycle @init="initList" :operatorList="operatorList" @submit="doorRecycle" :projectList="projectList"></door-recycle>
			</van-tab> 
			<van-tab :title-style="active == 5 ? 'color: #1152FC': ''" title="装修申请">
				<decoration-apply @init="initList" :operatorList="operatorList" @submit="validate" @renovationNotice="goRenovationNotice" :projectList="projectList"></decoration-apply>
			</van-tab>
			<van-tab :title-style="active == 6 ? 'color: #1152FC': ''" title="装修验收">
				<accept-check @init="initList" :operatorList="operatorList" @submit="accepetCheck" :projectList="projectList"></accept-check>
			</van-tab>
			<van-tab :title-style="active == 7 ? 'color: #1152FC': ''" title="绿植养护">
				<green-plant @init="initList" :operatorList="operatorList" @submit="validate1" :projectList="projectList"></green-plant>
			</van-tab>
			<van-tab :title-style="active == 8 ? 'color: #1152FC': ''" title="消防安全">
				<fire-safe @init="initList" :operatorList="operatorList" @submit="validate1" :projectList="projectList"></fire-safe>
			</van-tab>
			<van-tab :title-style="active == 9 ? 'color: #1152FC': ''" title="投诉建议">
				<opinion-feedback @init="initList" :operatorList="operatorList" @submit="validate1" :projectList="projectList"></opinion-feedback>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import GridSocial from '../Components/gridSocial.vue'
	import DecorationApply from '../Components/decorationApply.vue'
	import TroubleShoot from '../Components/troubleShoot.vue'
	import AcceptCheck from '../Components/acceptCheck.vue'
	import GreenPlant from '../Components/greenPlant.vue'
	import FireSafe from '../Components/fireSafe.vue'
	import DoorRecycle from '../Components/doorRecycle.vue'
	import EquipmentInstall from '../Components/equipmentInstall.vue'
	import EnvironmentClean from '../Components/environmentClean.vue'
	import OpinionFeedback from '../Components/opinionFeedback.vue'
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import dyDatetimePicker from '../../components/lanxiujuan-dyDateTime/lanxiujuan-dyDateTime'
	export default {
		components: {
			GridSocial,
			rangeDatePick,
			DateTimePicker,
			LbPicker,
			dyDatetimePicker,
			AcceptCheck,
			GreenPlant,
			EnvironmentClean,
			FireSafe,
			OpinionFeedback,
			DecorationApply,
			TroubleShoot,
			EquipmentInstall,
			DoorRecycle
		},
		data() {
			return {
				active: 0,
				projectList: [],
				operatorList: [],
				params1: {
					orgId: null,
					projectIds: null,
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
			}
		},
		onLoad() {
			this.projectList = uni.getStorageSync('projectList')
			// let project = uni.getStorageSync('userInfo').单位[0].工单员.负责项目
			// project.forEach(item => {
			// 	item.label = item.name
			// 	item.value = item.name
			// })
			// this.projectList = project
		},
		onShow() {
			this.getOperatorList()
		},
		computed: {

		},
		methods: {
			initList(e) {
				this.params1.projectIds = [e]
				this.getOperatorList()
			},
			getOperatorList() {
				// this.params1.单位id = uni.getStorageSync('currentUnitId')
				this.$http2.post('/sys/user/list', this.params1).then(res => {
					// console.log(res, '处理人员')
					if (res.code === 10000) {
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								item.value = item.id
								item.text = item.name
							})
							// this.operatorList = res.data.list.filter(item => {
							// 	return item.id !== this.接单人id
							// })
						}
						this.operatorList = res.data.list
					}
				})
			},
			validate(params) {
				// console.log(params)
				if(params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写报事人名',
						icon: 'none'
					})
				}else if(params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(!this.$funs.isCorrectMobile(params.联系人电话)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'none'
					})
				}else if(params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写装修地址',
						icon: 'none'
					})
				}else if(params.装修申请工单.装修事项.trim() == ''){
					uni.showToast({
						title: '请填写装修事项',
						icon: 'none'
					})
				}else if(params.装修申请工单.施工单位.trim() == ''){
					uni.showToast({
						title: '请填写施工单位',
						icon: 'none'
					})
				}else if(params.装修申请工单.装修开始时间.trim() == ''){
					uni.showToast({
						title: '请填写装修期限',
						icon: 'none'
					})
				}else if(params.装修申请工单.施工负责人.trim() == ''){
					uni.showToast({
						title: '请填写施工负责人',
						icon: 'none'
					})
				}else if(params.装修申请工单.负责人电话.trim() == ''){
					uni.showToast({
						title: '请填写负责人电话',
						icon: 'none'
					})
				}else if(params.所属项目id == null){
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					})
				}else if(params.报事描述.trim() == '') {
					uni.showToast({
						title: '请填写报事描述',
						icon: 'none'
					})
				}
				else {
					this.createTicket(params)
				}
			},
			accepetCheck(params) {
				if(params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写报事人名',
						icon: 'none'
					})
				}else if(params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(!this.$funs.isCorrectMobile(params.联系人电话)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'none'
					})
				}else if(params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写装修地址',
						icon: 'none'
					})
				}else if(params.装修验收工单.竣工时间.trim() == ''){
					uni.showToast({
						title: '请填写竣工时间',
						icon: 'none'
					})
				}else if((new Date().getTime() - new Date(params.装修验收工单.竣工时间.trim()).getTime()) >= 1000*60*60*24){
					uni.showToast({
						title: '请选择正确的竣工时间',
						icon: 'none'
					})
				}else if(params.上门时间.trim() == ''){
					uni.showToast({
						title: '请填写验收时间',
						icon: 'none'
					})
				}else if((new Date().getTime() - new Date(params.上门时间.trim()).getTime()) >= 1000*60*60*24){
					uni.showToast({
						title: '请选择正确的竣工时间',
						icon: 'none'
					})
				}else if(params.所属项目id == null){
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					})
				} else {
					this.createTicket(params)
				}
			},
			validate1(params) {
				// console.log(params)
				if(params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写报事人名',
						icon: 'none'
					})
				}else if(params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(!this.$funs.isCorrectMobile(params.联系人电话)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'none'
					})
				}else if(params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写报事地址',
						icon: 'none'
					})
				}else if(params.所属项目id == null){
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					})
				}else if(params.报事描述.trim() == '') {
					uni.showToast({
						title: '请填写报事描述',
						icon: 'none'
					})
				}else {
					this.createTicket(params)
				}
			},
			troubleShoot(params) {
				if(params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写报事人名',
						icon: 'none'
					})
				}else if(params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(!this.$funs.isCorrectMobile(params.联系人电话)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'none'
					})
				}else if(params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写报事地址',
						icon: 'none'
					})
				}else if(params.工单类型 == ''){
					uni.showToast({
						title: '请选择报修类型',
						icon: 'none'
					})
				}else if(params.所属项目id == null){
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					})
				}else if(params.报事描述.trim() == '') {
					uni.showToast({
						title: '请填写报事描述',
						icon: 'none'
					})
				}else {
					this.createTicket(params)
				}
			},
			doorRecycle(params) {
				if(params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写报事人名',
						icon: 'none'
					})
				}else if(params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(!this.$funs.isCorrectMobile(params.联系人电话)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'none'
					})
				}else if(params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写上门地址',
						icon: 'none'
					})
				}else if(params.所属项目id == null){
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					})
				}else if(params.报事描述.trim() == '') {
					uni.showToast({
						title: '请填写报事描述',
						icon: 'none'
					})
				}
				else {
					this.createTicket(params)
				}
			},
			equipmentInstall(params) {
				if(params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写报事人名',
						icon: 'none'
					})
				}else if(params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(!this.$funs.isCorrectMobile(params.联系人电话)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'none'
					})
				}else if(params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写安装地址',
						icon: 'none'
					})
				}else if(params.所属项目id == null){
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					})
				}else if(params.报事描述.trim() == '') {
					uni.showToast({
						title: '请填写报事描述',
						icon: 'none'
					})
				}else {
					this.createTicket(params)
				}
			},
			changeTab(name, title) {
				this.active = name.target.index
			},
			goRenovationNotice() {
				uni.navigateTo({
					url: '../renovationNotice/renovationNotice'
				})
			},
			createTicket(params) {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/submit', params).then(res => {
					if (res.code === 10000) {
						uni.redirectTo({
							url: '../acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回工单首页'
						})
						// uni.redirectTo({
						//     url: '../acceptSuccess/acceptSuccess?title=' + '工单创建成功'
						// });
						// uni.navigateTo({
						// 	url: '../success/success'
						// })
						// uni.showToast({
						// 	title: '提交成功'
						// })
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.appoint-container {
		padding-bottom: 45rpx;

		.appoint_banner {
			width: 750rpx;
			height: 296rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			display: flex;
			position: relative;
			// margin: 0 20rpx;
			padding-left: 20rpx;
			width: 750rpx;
			height: 86rpx;
			align-items: center;
			border-bottom: 2rpx solid #F5F5F5;

			// box-shadow: 0px 1px 0px 0px rgba(237, 237, 237, 1);
			text {
				margin-right: 8rpx;
				color: #333333;
				font-size: 28rpx;
			}

			input {
				color: #666;
				font-size: 28rpx;
				width: 560rpx;
			}

			.info {
				margin-right: 33rpx;
				color: #333;
			}

			.arrow {
				position: absolute;
				top: 28rpx;
				right: 36rpx;
				transform: rotate(45deg);
				width: 24rpx;
				height: 24rpx;
				color: #9F9F9F;
				border-top: 2rpx solid rgba(159, 159, 159, 1);
				border-right: 2rpx solid rgba(159, 159, 159, 1);
			}

			.tap {
				width: 500rpx;
				height: 86rpx;
				line-height: 86rpx;
			}
		}

		.upload {
			width: 750rpx;
			height: 221rpx;
			display: flex;
			padding-top: 20rpx;
			padding-left: 20rpx;

			.left {
				color: #333;
				font-size: 28rpx;
				width: 120rpx;
				height: 27rpx;
				margin-right: 8rpx;
			}

			.up_img {
				width: 587rpx;
				height: 268rpx;
				margin-left: 20rpx;
				display: flex;

				.add {
					width: 164rpx;
					height: 164rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.add_img {
					width: 164rpx;
					height: 164rpx;
					border: 1rpx solid #999999;
					margin-right: 40rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.clear {
						width: 40rpx;
						height: 40rpx;
						background-color: #000;
						opacity: 0.5;
						color: #BFBFBF;
						position: absolute;
						top: 0;
						right: 0;
						font-size: 32rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
		}

		.immediate {
			margin: 86rpx 0 0 84rpx;
			width: 578rpx;
			height: 72rpx;
			background-color: #1064E9;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}

		.dialog {
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.4;
			position: absolute;
			left: 0;
			top: 0;
		}

		.toast {
			width: 476rpx;
			height: 310rpx;
			border-radius: 20rpx;
			position: absolute;
			z-index: 99;
			left: 130rpx;
			top: 425rpx;
			color: #333;
			background-color: #fff;

			.icon {
				width: 82rpx;
				height: 82rpx;
				position: absolute;
				left: 197rpx;
				top: 61rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.success {
				font-size: 30rpx;
				position: absolute;
				left: 180rpx;
				top: 170rpx;
			}
		}
	}

	.btn {
		width: 568rpx;
		height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		background: linear-gradient(to right, #3350D9, #1152FC);
		// background: #1152FC;
		border-radius: 8rpx;
		margin-top: 60rpx;
		margin-left: 92rpx;
	}

	.van-tab--active {
		color: #42ADFF;
	}

	.van-ellipsis {
		color: #666;
		height: 80rpx !important;
		line-height: 80rpx !important;
		font-size: 28rpx;
		flex-basis: 25% !important;
	}

	.van-tabs__line {
		width: 112rpx !important;
		translateX: (28rpx) !important;
	}

	.van-tabs__wrap {
		border: 2rpx solid #eee;
		height: 80rpx !important;
		line-height: 80rpx !important;
	}

	.tab-active-class {
		color: #42ADFF;
	}

	.list {
		// height: 1100rpx;

		.type {
			width: 540rpx;
			height: 60rpx;
			line-height: 60rpx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				transform: rotate(45deg);
				border-top: 2rpx solid #666;
				border-right: 2rpx solid #666;
				top: 14rpx;
				right: 16rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.list-item {
			padding-left: 18rpx;
			width: 750rpx;
			height: 88rpx;
			display: flex;
			color: #333;
			border-bottom: 2rpx solid #f5f5f5;
			align-items: center;
			background-color: #fff;

			input {
				height: 60rpx;
				// background-color: pink;
				width: 500rpx;
			}
		}

		.btn {
			width: 568rpx;
			height: 80rpx;
			color: #fff;
			font-size: 32rpx;
			background: linear-gradient(to right, #3350D9, #1152FC);
			// background: #1152FC;
			border-radius: 8rpx;
			// margin-bottom: 60rpx;
			margin-top: 62rpx;
			margin-left: 92rpx;
		}

		.install {
			margin-top: 0;
		}

		.text {
			width: 750rpx;
			height: 220rpx;
			color: #333;
			padding-top: 20rpx;
			padding-left: 20rpx;
			background-color: #fff;
		}

		.list-bottom {
			width: 750rpx;
			height: 310rpx;
			background-color: #fff;
			padding-top: 40rpx;
			display: flex;

			.upload-img {
				width: 230rpx;
				height: 230rpx;
				margin-left: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.img-list {
				position: relative;

				image {
					width: 230rpx;
					height: 230rpx;
					margin-left: 10rpx;
				}

				.clear {
					width: 40rpx;
					height: 40rpx;
					background-color: #000;
					opacity: 0.5;
					color: #BFBFBF;
					position: absolute;
					top: 0;
					right: 0;
					font-size: 32rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.container {
			width: 100%;
			height: 620rpx;
		}

		.renovation-notice {
			margin-top: 33rpx;
			margin-left: 179rpx;
			font-size: 26rpx;
			color: #999;

			span {
				color: #5BA1FF;
			}
		}
	}

	.list2 {
		height: 800rpx;
	}
</style>